<template>
    <transition name="fade">
        <div :class="{[prefixCls+'-drawer-wrap']:true,[prefixCls+'-drawer-open']:visible}" v-show="visible" @click="drawerHide" :style="{'background-color':maskShow?'rgba(0,0,0,0.4)':''}" ref="drawerWrap">
            <div :class="[[prefixCls+'-drawer'],[prefixCls+'-drawer-'+direction]]" :style="{'width':widths,'height':heights}" @click.stop="eject" ref="eject">
                <!--加载中-->
                <div class="loading" v-if="loading">
                    <div class="loader" title="2">
                        <svg version="1.1" id="loader-1" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;">
                            <path d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" :fill="loadingColor">
                                <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.8s" repeatCount="indefinite"/>
                            </path>
                        </svg>
                        <p style="color: #606266;">加载中</p>
                    </div>
                </div>
                <div :class="[prefixCls+'-drawer-header']"
                        v-if="headerShow"
                        :style="{'background':headerBackground}">
                    <div v-if="!headerSlot">
                        <span class="title" :style="{'color':titleColor}">{{title?title:"标题"}}</span>
                        <span @click.stop="close" class="close" v-if="closeBtnShow"><i class="icon icon-close"></i></span>
                    </div>
                    <slot name="header"></slot>
                </div>
                <div :class="[prefixCls+'-drawer-body']" :style="{'background':mainBackground}">
                    <slot></slot>
                </div>
                <div :class="[prefixCls+'-drawer-footer']"
                        v-if="footerShow"
                        :style="{'height':footerHeight,'background':footerBackground}">
                    <slot name="footer"></slot>
                </div>
            </div>
        </div>
    </transition>
</template>
<script>
import {prefixCls} from '../prefix'
import './drawer.css'

export default {
    name: `${prefixCls}Drawer`,
    props:{
        visible: Boolean,
        title: String,
        closeBtnShow: {
            type: Boolean,
            default: true
        },
        footerShow: {
            type: Boolean,
            default: false
        },
        footerHeight: {
            type: String,
            default: '60px'
        },
        width: String,
        height: String,
        footerBackground: {
            type: String,
            default: '#fff'
        },
        headerShow: {
            type: Boolean,
            default: true
        },
        headerBackground: {
            type: String,
            default: '#fff'
        },
        titleColor: String,
        mainBackground: {
            type: String,
            default: '#fff'
        },
        direction: {
            type: String,
            default: 'right'
        },
        closeOnClickMask: {
            type: Boolean,
            default: true,
        },
        loading: {
            type: Boolean,
            default: false
        },
        loadingColor: {
            type: String,
            default: '#409EFF'
        },
        mask: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            prefixCls: prefixCls,
            timer: undefined,
            heights: '',
            widths: '',
            headerSlot: false, //头部插槽
            maskShow: true, //遮罩层
        }
    },
    watch:{
        visible(newVal,oldVal){
            if(newVal){
                //显示的时候
                this._createElement()
                this.$emit("open")
            }else{
                document.body.removeAttribute("class","drawer-body");
            }
        },
        loading(newVal,oldVal){
            if(newVal){
                //显示的时候
            }else{

            }
        },
    },
    mounted(){
        if(this.$scopedSlots.header){
            this.headerSlot = true
        }
    },
    beforeDestroy(){
    },
    methods: {
        // _createElement() {
        //     const body = document.querySelector("body");
        //     this.$nextTick(()=> {
        //         if (body.append) {
        //             body.append(this.$refs.drawerWrap);
        //         } else {
        //             body.appendChild(this.$refs.drawerWrap);
        //         }
        //         this.drawerConfig()
        //     });
        // },
        _createElement(){
            this.maskShow = this.mask

            if(this.direction == 'right' || this.direction == 'left'){
                if(!this.width){
                    this.widths = '500px'
                }else{
                    if(this.width.indexOf('px') == -1){
                        let winW = document.body.clientWidth;
                        this.widths = parseInt(this.width)*winW/100+'px'
                    }else {
                        this.widths = this.width
                    }
                }
                this.heights = '100%'
            }else if(this.direction == 'top' || this.direction == 'bottom'){
                if(!this.height){
                    this.heights = '300px'
                }else{
                    if(this.height.indexOf('px') == -1){
                        let winW = document.documentElement.clientHeight;
                        console.log(winW)
                        this.heights = parseInt(this.height)*winW/100+'px'
                        console.log(this.heights)
                    }else {
                        this.heights = this.height
                    }
                }
                this.widths = '100%'
            }

            document.getElementsByTagName("body")[0].className="drawer-body";
        },
        //关闭按钮
        close() {
            this.$emit("update:visible",false);
            this.$emit("close")
            if(this.loading){
                this.$emit("update:loading",false);
            }
            document.body.removeAttribute("class","drawer-body");
        },
        //点击遮罩层隐藏
        drawerHide(){
            if(this.closeOnClickMask){
                this.close()
            }
        },
        //阻止侧栏冒泡事件
        eject(){},
        //侧栏动画开始之前
        beforeEnter(el,time = 0.4){
            let wid = '500px'
            let hit = '300px'
            if(this.width){
                wid = this.widths
            }
            if(this.height){
                hit = this.heights
            }
            el.style.transition = "all "+time+"s ease"
            switch(this.direction){
                case "left":
                    el.style.transform = "translate(-"+wid+",0px)"
                    break;
                case "right":
                    el.style.transform = "translate("+wid+",0px)"
                    break;
                case "bottom":
                    el.style.transform = "translate(0px,"+hit+")"
                    break;
                case "top":
                    el.style.transform = "translate(0px,-"+hit+")"
                    break;
                default:
                    alert("目前只支持top,bottom,left,right")
            }
        },
        //侧栏动画结束
        enter(el,done){
            // el.offsetWidth
            // el.style.transform = "translate(0px,0px)"
            // done()
        },

        //关闭动画
        leave(el){
            // this.beforeEnter(el,0.2)
        },
        //关闭动画结束
        afterLeave(){

        },
        //-----------------------------------------------------
        //遮罩动画开始
        drawerBeforeEnter(el){
            this.$emit("open")
        },

        //遮罩动画结束之后
        drawerAfterEnter(el){
            this.$emit("opend")
        },
        drawerleave(el){
            this.$emit("closed")
        },
    }
}
</script>
